<!-- 人员管理 -->
<template>
	<d2-container>
		<div slot="header" style="display:flex; justify-content: space-between;">
			<div>人员管理</div>
			<div>
				<el-form :inline="true" class="demo-form-inline" size="small">
					<!-- <el-form-item label="权限" size="small">
						<el-select placeholder="请选择人员权限" style="width: 150px;" v-model="type">
							<el-option label="收银员" value="2"></el-option>
							<el-option label="管理员" value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="名称" size="small"><el-input style="width: 150px;"></el-input></el-form-item>
					<el-form-item><el-button type="primary" size="small " icon="el-icon-zoom-in">搜索</el-button></el-form-item> -->
					<el-form-item><el-button type="primary" size="small " icon="el-icon-plus" @click="onadd">添加</el-button></el-form-item>
				</el-form>
			</div>
		</div>
		<div>
			<template>
				<el-table stripe style="width: 100%" highlight-current-row :data="tabelData">
					<el-table-column type="index" width="50"></el-table-column>
					<el-table-column prop="username" label="帐号"></el-table-column>
					<el-table-column prop="name" label="姓名"></el-table-column>
					<el-table-column prop="mobile" label="手机号"></el-table-column>
					<el-table-column label="权限">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.type == 2">收银员</el-tag>
							<el-tag type="danger" v-if="scope.row.type == 1">管理员</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="状态">
						<template slot-scope="scope">
							<el-tag v-if="scope.row.state == 1">正常</el-tag>
							<el-tag type="danger" v-if="scope.row.state == 2">异常</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="onUpdate(scope.row.id)">修改</el-button>
							<el-button type="text" size="small" v-if="scope.row.state == 1" @click="onState(scope.row.id,2)">封禁</el-button>
							<el-button type="text" size="small" v-if="scope.row.state == 2" @click="onState(scope.row.id,1)">解封</el-button>
							<el-button type="text" size="small" @click="onDel(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<!-- 分页 -->
		<template slot="footer">
			<el-pagination
				@current-change="handleCurrentChange"
				:current-page="page.current"
				layout="total, prev, pager, next, jumper"
				:total="page.total"
				:page-size="page.size"
			></el-pagination>
		</template>
		<!-- 添加和修改用户 -->
		<el-dialog title="人员管理" :visible.sync="dialogFormVisible" width="500px" :before-close="dialogFormVisibleClose">
			<el-form label-width="100px" :model="form" ref="formPersonnel">
				<el-form-item label="姓名" prop="name"><el-input v-model="form.name"></el-input></el-form-item>
				<el-form-item label="账号" prop="username"><el-input v-model="form.username" :disabled="updateDis"></el-input></el-form-item>
				<el-form-item label="密码" prop="password" v-if="id==-1"><el-input show-password v-model="form.password"></el-input></el-form-item>
				<el-form-item label="密码" prop="password" v-if="id!=-1"><el-input v-model="form.password" show-password placeholder="不填写就使用默认密码"></el-input></el-form-item>
				<el-form-item label="联系电话" prop="mobile"><el-input maxlength="11" v-model="form.mobile"></el-input></el-form-item>
				<el-form-item label="权限" prop="type">
					<el-radio :label="1" v-model="form.type">管理员</el-radio>
					<el-radio :label="2" v-model="form.type">收银员</el-radio>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit" size="small">确定</el-button>
					<el-button @click="dialogFormVisibleClose" size="small">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</d2-container>
</template>

<script>
import { getAdminuser, postAdminAdd,getAdminDel,getAdminEdit,postAdminUpdate,postAdminState } from '@/api/api';
export default {
	data() {
		return {
			dialogFormVisible: false,
			//搜索
			type: '',
			//列表数据
			tabelData: [],
			page: {
				//分页
				total: 20,
				current: 1,
				size: 10
			},
			id: -1,
			//表单
			form: {
				username: '',
				password: '',
				name: '',
				mobile: '',
				type: ''
			},
			updateDis:false
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		//列表
		getData() {
			let data={
				page:this.page.current
			}
			getAdminuser(data).then(res => {
				if (res.state == 0) {
					this.tabelData = res.data.data;
					this.page.size = res.data.per_page;
					this.page.total = res.data.total;
				}
			});
		},
		//添加和修改弹窗 关闭
		dialogFormVisibleClose() {
			this.dialogFormVisible = false;
			this.$refs.formPersonnel.resetFields(); //重置表单
		},
		//分页
		handleCurrentChange(val) {
			this.page.current = val;
			this.getData();
		},
		//添加
		onadd(){
			this.id=-1;
			this.dialogFormVisible=true;
			this.updateDis=false
		},
		//添加和修改 提交
		onSubmit() {
			//添加
			if (this.id == -1) {
				postAdminAdd(this.form).then(res => {
					if (res.state == 0) {
						this.$message.success('添加成功');
						this.dialogFormVisibleClose();
						this.getData();
					}
				});
			}else{
				let data={
					id:this.id,
					username:this.form.username,
					password:this.form.password,
					name:this.form.name,
					mobile:this.form.mobile,
					type:this.form.type
				}
				postAdminUpdate(data).then(res=>{
					if(res.state==0){
						this.$message.success('修改成功');
						this.dialogFormVisibleClose();
						this.getData();
					}
				})
			}
		},
		//修改详情
		onUpdate(id){
			getAdminEdit(id).then(res=>{
				if(res.state==0){
					this.form=res.data;
					this.form.password='';
					this.updateDis=true;
					this.dialogFormVisible=true;
					this.id=id;
				}
			})
		},
		//删除
		onDel(id) {
			this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				getAdminDel(id).then(res=>{
					if(res.state==0){
						this.$message.success("删除成功")
						this.getData()
					}
				})
			});
		},
		//封号 解封
		onState(id,state){
			// let data={
			// 	id:id,
			// 	state:state
			// }
			this.$confirm('此操作将更改该用户使用状态, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				postAdminState({id:id,state:state}).then(res=>{
					if(res.state==0){
						this.$message.success("更改成功!");
						this.getData();
					}
				})
			});
			
		}
	}
};
</script>

<style></style>
